<template>
  <div class="ii-box">
    <div class="box">
    <div class="img"><AudioImg></AudioImg></div>
    <div class="audio-box">
    <AudioSearch></AudioSearch>
    <AudioList class="list"></AudioList>
    </div>
  </div>
    <Audio class="audio"></Audio>
  </div>
</template>

<script>
import AudioImg from '@/components/AudioImg'
import AudioSearch from '@/components/AudioSearch'
import AudioList from '@/components/AudioList'
import Audio from '@/components/Audio'
export default {
  components: { AudioImg, AudioSearch, AudioList, Audio }
}
</script>

<style scoped>
.ii-box {
  height: 100%;
  padding-top: 50px;
}
.box {
  display: flex;
  height: 100%;
}
.img {
  flex: 1;
  margin: 2% 0 0 10%;
}
.audio-box {
flex: 2;
margin-left: 50px;
}
.list {
  margin-top: 50px;
}
.audio {
  position: fixed;
  left: 50%;
  bottom: 0;
  margin-left: 0px;
  transform: translateX(-50%);
}
</style>
